<template>
	<view class="container grace-flex grace-flex-vtop grace-border-b">
		<image class="avatar" :src="item.userAvatar" mode="widthFix" lazy-load></image>
		<view class="grace-columns grace-flex1">
			<view class="grace-space-between">
				<view class="grace-flex grace-columns">
					<view class="grace-flex-center grace-flex-vcenter">
						<text class="name grace-h6 grace-black9">{{ item.username }}</text>
						<view class="grace-tags grace-border-radius grace-white" :class="[item.sex == 0 ? 'grace-bg-light-blue' : 'grace-bg-pink']">
							<text class="gender iconfont" :class="[item.sex == 0 ? 'icon-nan' : 'icon-nv']"></text>
							<text style="margin-left: 5rpx;font-size: 22rpx;">{{ item.age }}</text>
						</view>
					</view>
					<text class="grace-black9 grace-text">26天前</text>
				</view>
				<view class="follow grace-flex-vcenter grace-flex-center" v-show="!isFollow" @click="follow">
					<view class="iconfont icon-zengjia"></view>
					关注
				</view>
			</view>
			<view class="title grace-black">{{ item.title }}</view>
			<view>
				<view class="image-container grace-flex-vcenter grace-flex grace-columns">
					<!-- 图片 -->
					<block v-for="(pic,index) in item.morepic" :key="index">
							<image :src="pic" mode="widthFix" lazy-load @tap="previewImg(index)" style="margin-bottom: 20rpx;"></image>
					</block>
					<!-- 视频 -->
					<template v-if="item.video">
						<view class="iconfont icon-bofang play"></view>
						<view class="play-info">{{ item.video.playNum }}次播放 {{ item.video.duration }}</view>
					</template>
					<!-- 分享 -->
					<view v-if="item.share" class="share grace-flex grace-rows grace-flex-vcenter">
						<image :src="item.share.pic" mode="widthFix" lazy-load></image>
						<text class="grace-wrap">{{ item.share.title }}</text>
					</view>
				</view>
			</view>
			<view class="oprator grace-black9 grace-space-between">
				<text>{{ item.address }}</text>
				<view class="grace-flex">
					<view class="grace-flex-center grace-flex-vcenter">
						<view class="iconfont icon-pinglun1"></view>
						<text>{{ item.commentNum }}</text>
					</view>
					<view class="grace-flex-center grace-flex-vcenter">
						<view class="iconfont icon-zhuanfa"></view>
						<text>{{ item.shareNum }}</text>
					</view>
					<view class="grace-flex-center grace-flex-vcenter">
						<view class="iconfont icon-dianzan"></view>
						<text>{{ item.likeNum }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: Object
	},
	data() {
		return {
			isFollow: this.item.isFollow
		};
	},
	methods: {
		previewImg(index){
			uni.previewImage({
				current:index,
				urls:this.item.morepic
			})
		},
		follow() {
			this.isFollow = true;
			uni.showToast({
				title: '关注成功'
			});
		}
	}
};
</script>

<style lang="stylus">
.container
	padding 25rpx
	.avatar
		margin-right 20rpx
		border-radius 100%
		width 90rpx
		height 90rpx
	.follow
		height 30rpx
		background #F4F4F4
		border-radius 5rpx
		padding 10rpx
		font-size 26rpx
	.name
		margin-right 10rpx
	.gender
		font-size 20rpx
	.title
		margin-top 10rpx
		font-size 36rpx
	.image-container
		margin-top 20rpx
		position relative
		box-sizing border-box
		image
			width 100%
			border-radius 15rpx
		.share
			width 100%
			background #F5F5F5
			padding 10rpx
			border-radius 10rpx
			image
				width 180rpx
				height 140rpx
				margin-right 20rpx
			text
				line-height 50rpx
		.play
			position absolute
			font-size 150rpx
			color #FFFFFF
		.play-info
			position absolute
			background rgba(51, 51, 51, 0.72)
			border-radius 40rpx
			color #FFFFFF
			right 8rpx
			bottom 8rpx
			font-size 26rpx
			padding 10rpx 20rpx
	.oprator
		padding 20rpx 0
		:nth-child(2)
			view
				margin-left 10rpx
				text
					margin-left 10rpx
</style>
